<template>
  <!-- 弹窗 start -->
  <div ref="mapPopup" class="map-popup-all bg" v-show="popupShow">
    <!-- <div class="map-popup-closer" @click.stop="closePopup">+</div> -->
    <!-- <h3>{{ currentTitle.title || " " }} -->
      <template v-if="currentTitle.city">
        <i style="margin-left:16px" class="city el-icon-location-outline"></i>
        <span class="city">{{ currentTitle.city || " " }}</span>
      </template>
    <!-- </h3> -->
    <div id="popup-content-map"><slot /></div>
  </div>
  <!-- 弹窗 end -->
</template>
<script>
// 弹窗组件
import * as ol from 'ol';
import Overlay from "ol/Overlay";
export default {
  name: "MapOverlay",
  /**
   * position // 弹窗中心点 Array[array]， 必须
   * title // 弹窗标题 Object，非必须，默认为 {}
   * mapShow // 弹窗显隐 Boolean，必须，默认为 true
   * offset // 弹窗偏移 Array[number]，必须，默认为 [0, 0]
   * className // 图层的class String，非必须，默认为 'map-popup'
   * close() // 弹窗关闭事件
   * id /// id
   */
  props: {
    position: { type: Array },
    className: { type: String },
    mapShow: { type: Boolean },
    // title: { 
    //   type: Object,
    //   default: {}
    // },
    offset: { type: Array },
    id: {type: String},
  },
  data() {
    return {
      popupShow: true,
      dialogOverlay: null,
      currentTitle: '',
    };
  },
  watch: {
    position: {
      handler() {
        this.reload();
      },
      deep: true,
    },
    // className: {
    //   handler() {
    //     this.reload();
    //   },
    //   deep: true,
    // },
    // title: {
    //   handler(val) {
    //     this.currentTitle = val
    //   },
    //   deep: true,
    //   immediate: true
    // },
    // offset: {
    //   handler() {
    //     this.reload();
    //   },
    //   deep: true,
    // },
    mapShow: {
      handler: function (val) {
        this.popupShow = val
      },
      immediate: true
    },
    popupShow: {
      handler(val) {
        this.popupShow = val;
        this.$emit('update:mapShow', val)
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.reload();
    });
  },
  methods: {
    reload() {
      if (this.dialogOverlay) {
        this.$parent.$data.map.removeOverlay(this.dialogOverlay);
      }
      this.dialogOverlay = new ol.Overlay({
        element: this.$refs.mapPopup,
        stopEvent: false,
        offset: this.offset || [0, 0],
        className: this.className || "map-popup",
        autoPanAnimation: {
          duration: 250,
        },
        autoPan: false, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
      });
      this.dialogOverlay.setPosition(this.position);
      this.$parent.$data.map.addOverlay(this.dialogOverlay);
      
     
    },
    closePopup() {
      this.popupShow = false
      this.$emit("close", false);
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.map-popup-all {
  position: absolute;
  z-index: 9999;
  bottom: 20px;
  left: 10%;
  // min-width: 150px;
  transform: translateX(-50%);
  padding: 18px;
  color: white;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  word-break: break-all;
  // background-color: rgba(2,35,58,0.9);
  h3 {
    font-size: 14px;
    margin-top: -4px;
    padding-right: 20px;
    font-size: 18px;
    padding-bottom: 16px;
    .city{
      font-size: 14px;
      color:#0cfffe;
    }
  }
  .map-popup-closer {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    text-align: center;
    height: 20px;
    font-size: 26px;
    transform: rotate(45deg);
    color: #0cfffe;
    cursor: pointer;
  }
  .map-popup-closer:hover {
    color: #0cfffe;
  }
}
// .map-popup-all::before {
//   content: " ";
//   width: 0;
//   height: 0;
//   border: solid 10px transparent;
//   border-top-color: rgba(2,35,58,0.9);
//   position: absolute;
//   bottom: -20px;
//   left: 50%;
//   transform: translateX(-50%);
// }
</style>

